<template>
  <div class="messageBox sub-main" v-loading="listLoading">
    <div v-if="messageList.length">
      <div class="messageList">
        <div
          class="itemBox"
          v-for="item of messageList"
          :key="item.noticeId"
          @click="goToDetail(item)"
        >
          <div
            class="icon"
            :class="{
              color: item.noticeType === 3
            }"
          >
            <svg-icon style="width: 36px;height: 36px;" name="user-notice-icon" />
            <div class="point" v-if="item.ifRead === 0"></div>
          </div>
          <div class="messageTitle">
            <h3
              v-if="item.noticeType === 1"
            >
              {{ item.noticeContent }}
            </h3>
            <h3
              v-if="[2,3].includes(item.noticeType)"
            >
              {{ item.noticeTitle }}
            </h3>
            <span>{{ item.createTime }}</span>
          </div>
          <el-button
            class="delBtn"
            type=""
            link
            v-if="item.notice_type !== 3"
            @click.stop="delNotice(item)"
          >
            <svg-icon style="width: 32px;height: 32px;" name="del" />
          </el-button>
        </div>
      </div>
      <el-pagination
        :hide-on-single-page="true"
        v-model:current-page="page.page"
        v-model:page-size="page.pageSize"
        background
        layout="prev, pager, next, jumper"
        :total="page.total"
        @current-change="handleCurrentChange"
        style="justify-content: flex-end;"
      />
    </div>
    <div class="nothing" v-else>
      <svg-icon style="width: 240px; height: 240px; margin: 40px;" name="user-notice-nodata" />
      <p class="fs20 font-color-999">你还没有消息～</p>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, onBeforeMount, reactive, shallowRef, ref } from 'vue'
import { useRouter } from 'vue-router'
import SvgIcon from '@/components/svgIcon/index.vue';
import {
  getNoticeAll,
  readNotice,
  noticeDel
} from '@/api/user/notice.js'

defineComponent({
  name: 'MessageIndex'
})

let messageList = ref([]);
let page = reactive({
  page: 1,
  pageSize: 10,
  total: 1,
})
let listLoading = shallowRef(false);
function getList () {
  listLoading.value = true;
  getNoticeAll({
    page: page.page,
    pageSize: page.pageSize
  }).then(response => {
    const res = response.data;
    if (res.code === "200") {
      messageList.value = res.data.list;
      page.total = parseInt(res.data.total);
    }
  }).catch(err => {
    ElMessage.error(err.message)
  }).finally(() => listLoading.value = false);
}

function handleCurrentChange (val) {
  page.page = val
  getList();
}

// 查看详情
function goToDetail (item) {
  readNotice({ noticeId: item.noticeId }).then(response => {
    const res = response.data;
    if (res.code === "200") {
      noticeJump(item);
    }
  }).catch(err => ElMessage.error(err.message))
}

// 详情跳转
const router = useRouter();
function noticeJump (item) {
  if (item.noticeType === 1 && item.jump === 2) {
    router.push({
      path: "/orderDetail",
      query: {
        orderId: item.only,
        noticeId: item.noticeId
      }
    });
  } else {
    router.push({
      path: "/activity/notificationDetails",
      query: {
        id: item.noticeId
      }
    });
  }
}
function delNotice (item) {
  if (!item.noticeId) {
    ElMessage.warning("选中消息异常！");
    return;
  }
  noticeDel({ noticeId: item.noticeId }).then(response => {
    const res = response.data;
    if (res.code === "200") {
      ElMessage.success("删除成功");
      getList();
    }
  }).catch(err => ElMessage.error(err.message))
}

onBeforeMount(() => {
  getList();
})
</script>

<style lang="scss" scoped>
.messageBox {
  background: #FAFAFA;
  border: 1px solid #E5E5E5;
  padding: 25px;
  .messageList {
    .itemBox {
      height: 80px;
      padding: 10px 20px;
      margin-bottom: 30px;
      background-color: #FFF;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.3s linear;
      cursor: pointer;
      &:hover{
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
        .delBtn{
          display: block;
          height: 45px;
        }
      }
      .icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #333333;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-size: 26px;
        margin-right: 30px;
        position: relative;
        .point{
          width: 10px;
          height: 10px;
          border-radius: 5px;
          background-color: red;
          position: absolute;
          top: 10px;
          right: 10px;
        }
      }
      .color {
        background: #C5AA7B;
      }
      .messageTitle {
        flex: 1;
        h3 {
          color: #333333;
          font-size: 14px;
          margin-bottom: 20px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        span {
          color: #666666;
          font-size: 12px;
        }
      }
      .delBtn{
        display: none;
        animation: s 1.5s;
      }
      @keyframes s {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
    }
  }
}
.sub-main{
  min-height: 400px;
}
.nothing{
  width: 100%;
  text-align: center;
  min-height: 400px;
  p{
      margin-bottom: 20px;
  }
}
</style>
